<template>
  <el-dialog
    title="选择部门"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <div class="head-container">
      <el-input
        v-model="deptName"
        clearable
        placeholder="请输入部门名称"
        prefix-icon="el-icon-search"
        size="small"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="head-container">
      <el-tree
        ref="deptTree"
        node-key="id"
        :data="deptOptions"
        show-checkbox
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :props="defaultProps"
        default-expand-all
        @check-change="handleCheckChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitSelectedDeptHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {treeselect} from '@/api/system/dept'

export default {
  name: 'DeptChooseTree',
  data() {
    return {
      // 遮罩层
      loading: true,
      dialogVisible: false,
      deptName: '',
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    deptName(val) {
      this.$refs.deptTree.filter(val)
    }
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    // 显示用户选择弹窗
    showDialog(val) {
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs.deptTree) {
          this.$refs.deptTree.setCheckedKeys(val.map((item)=>item.id), true)
        }
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data
      })
    },
    handleCheckChange() {

    },
    // 如果子节点全部被选中 只获取顶级父节点的数据
    getSimpleCheckedNodes(store) {
      const checkedNodes = []
      const traverse = function (node) {
        const childNodes = node.root ? node.root.childNodes : node.childNodes
        childNodes.forEach((child) => {
          console.log(child)
          if (child.checked) {
            checkedNodes.push(child.data)
          }
          if (child.indeterminate) {
            traverse(child)
          }
        })
      }
      traverse(store)
      return checkedNodes
    },
    submitSelectedDeptHandle() {
      this.$emit('submit', this.getSimpleCheckedNodes(this.$refs.deptTree.store))
      this.dialogVisible = false
    }
  }
}
</script>
